<title>媒体</title>

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">媒体</h1>
        <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon wb-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="搜索...">
                </div>
            </form>
        </div>
    </div>
    <div class="page-content">
        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">默认</h4>
                            <div class="example">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-1.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-2.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="javascript:;">
                                                    <img class="media-object" src="/images/photos/view-3.jpg" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">媒体标题</h4>
                                                这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-4.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">媒体列表</h4>
                            <div class="example">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-5.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="javascript:;">
                                                    <img class="media-object" src="/images/photos/view-6.jpg" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">嵌套媒体标题</h4>
                                                这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="javascript:;">
                                                    <img class="media-object" src="/images/photos/view-7.jpg" alt="...">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">嵌套媒体标题</h4>
                                                这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-8.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">嵌套媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row row-lg">
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">带头像的媒体列表</h4>
                            <div class="example">
                                <div class="media">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/2.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/3.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">嵌套媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/4.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">嵌套媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/5.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">嵌套媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">大小</h4>
                            <div class="example">
                                <div class="media media-xs">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-9.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media media-sm">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-10.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-11.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                                <div class="media media-lg">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-12.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row row-lg">
                    <div class="col-lg-6">

                        <div class="example-wrap margin-lg-0">
                            <h4 class="example-title">含按钮</h4>
                            <div class="example">
                                <div class="media media-sm">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/2.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                        <p class="margin-top-10">
                                            <a class="btn btn-sm btn-warning" href="javascript:;" role="button">编辑</a>
                                            <a class="btn btn-sm btn-default" href="javascript:;" role="button">取消</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="media media-sm">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/3.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                        <p class="margin-top-10">
                                            <a class="btn btn-sm btn-danger" href="javascript:;" role="button">确认</a>
                                            <a class="btn btn-sm btn-default" href="javascript:;" role="button">取消</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="media media-sm">
                                    <div class="media-left">
                                        <a class="avatar avatar-lg" href="javascript:;">
                                            <img src="/images/portraits/4.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">媒体标题</h4>
                                        T这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                        <p class="margin-top-10">
                                            <a class="btn btn-sm btn-primary" href="javascript:;" role="button">保存</a>
                                            <a class="btn btn-sm btn-default" href="javascript:;" role="button">取消</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">对齐方式</h4>
                            <div class="example">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-13.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">顶部对齐</h4>
                                        <p>
                                            这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。</p>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left media-middle">
                                        <a href="javascript:;">
                                            <img class="media-object" src="/images/photos/view-14.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">上下对齐</h4>
                                        <p>
                                            这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
